<template lang="">
    <div>
        <h3>车联网后台管理系统</h3>
    
        <a-menu
          theme="dark"
          mode="inline"
          
          :style="{ height: '100%', borderRight: 0 }"
        >
          <a-menu-item @click="clickMenu(item)" v-for="item in noChildren" :index="item.path" :key="item.path">
            <span >{{item.label}}</span>
          </a-menu-item>
          <template v-for="item in hasChildren">
            <a-sub-menu   :index="item.path" :key="item.path" >
                <span slot="title">
                 {{item.label}}
                </span>
                <template v-for="(subItem,subIndex) in item.children">
                 <a-menu-item @click="clickMenu(subItem)" :key="subItem.path" :index="subIndex">{{subItem.label}}</a-menu-item>
                 
                </template>
            </a-sub-menu>
          </template>
        </a-menu>
    </div>
</template>
<script>
export default {
    data() {
        return {
            menu: [
                {
                    path: '/',
                    name: 'home',
                    label: '首页',
                    icon: 'home',
                    url: 'Home/Home'
                },
                {
                    label: '用户管理',
                    icon: 'user',
                    children: [
                        {
                            path: '/user1',
                            name: 'user1',
                            label: '顾客信息',
                            url: 'User/index1'
                        },
                        {
                            path: '/user2',
                            name: 'user2',
                            label: '配送员信息',
                            url: 'User/index2'
                        },
                        // {
                        //     path: '/user3',
                        //     name: 'user3',
                        //     label: '页面3',
                        //     url: 'User/index3'
                        // },
                        // {
                        //     path: '/user4',
                        //     name: 'user4',
                        //     label: '页面4',
                        //     url: 'User/index4'
                        // }
                    ]
                },

                {
                    label: '车辆管理',
                    icon: 'car',
                    children: [
                        {
                            path: '/car1',
                            name: 'car1',
                            label: '车辆基本信息',
                            url: 'Car/index1'
                        },
                        {
                            path: '/car2',
                            name: 'car2',
                            label: '车辆状态信息',
                            url: 'Car/index2'
                        },
                        {
                            path: '/car3',
                            name: 'car3',
                            label: '车辆路线信息',
                            url: 'Car/index3'
                        },
                        // {
                        //     path: '/car4',
                        //     name: 'car4',
                        //     label: '页面4',
                        //     url: 'Car/index4'
                        // }
                    ]
                }
                ,
                {
                    label: '订单管理',
                    icon: 'plan',
                    children: [
                        {
                            path: '/plan1',
                            name: 'plan1',
                            label: '下单排序',
                            url: 'plan/index1'
                        },
                        {
                            path: '/plan2',
                            name: 'plan2',
                            label: '预约排序',
                            url: 'plan/index2'
                        },
                        {
                            path: '/plan3',
                            name: 'plan3',
                            label: '运输中',
                            url: 'plan/index3'
                        },
                        {
                            path: '/plan4',
                            name: 'plan4',
                            label: '已完成',
                            url: 'plan/index4'
                        }
                    ]
                }
                ,
                {
                    label: '反馈中心',
                    icon: 'feed',
                    children: [
                        {
                            path: '/feed1',
                            name: 'feed1',
                            label: '问题反馈',
                            url: 'feed/index1'
                        },
                        {
                            path: '/feed2',
                            name: 'feed2',
                            label: '评价',
                            url: 'feed/index2'
                        }
                    ]
                }

            ],
        }
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        clickMenu(item) {
            this.$router.push({
                name: item.name,
            })
           
        }
    },
    computed: {
        noChildren() {
            return this.menu.filter(item => !item.children)
        },
        hasChildren() {
            return this.menu.filter(item => item.children)
        },
        isCollapse() {
            return this.$store.state.tab.isCollapse
        }
    }

}
</script>
<style  scoped>
h3 {
    margin: 18px;
    color: aliceblue;
}
</style>